<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人中心 - 简易商城</title>
    <link rel="stylesheet" href="../css/css/style.css">
    <style>
        body { background: #f5f5f5; }
        .profile-container {
            max-width: 600px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px #eee;
            padding: 30px 40px;
        }
        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .profile-avatar {
            width: 64px; height: 64px;
            border-radius: 50%;
            background: #eee;
            margin-right: 20px;
            display: flex; align-items: center; justify-content: center;
            font-size: 32px; color: #aaa;
        }
        .profile-username {
            font-size: 22px;
            font-weight: bold;
        }
        #orderHistory h3 { margin-top: 30px; }
        #orderHistory ul { margin: 0; padding-left: 20px; }
        #orderHistory li {
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            font-size: 15px;
        }
        #orderHistory .order-total { color: #e4393c; }
        .logout-btn {
            display: inline-block;
            margin-top: 10px;
            background: #e4393c;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 6px 18px;
            cursor: pointer;
        }
        .logout-btn:hover { background: #b7271e; }
    </style>
</head>
<body>
    <div class="profile-container">
        <div class="profile-header">
            <div class="profile-avatar">👤</div>
            <div>
                <div class="profile-username" id="profileUsername"></div>
                <button class="logout-btn" onclick="localStorage.removeItem('currentUser');location.href='../index.html'">退出登录</button>
            </div>
        </div>
        <div id="userInfo"></div>
        <div id="orderHistory"></div>
    </div>
    <script src="../js/auth.js"></script>
    <!-- 在 profile.html 的 <script> 部分加入/替换如下代码 -->
    <script src="../js/auth.js"></script>
    <script>
    function showProfileWithAvatar() {
        const user = localStorage.getItem('currentUser');
        document.getElementById('profileUsername').textContent = user ? user : '未登录';
        showProfile();
    }

    // 新的 showProfile 函数，带删除订单功能
    function showProfile() {
        const user = localStorage.getItem('currentUser');
        if (!user) return;
        const orders = JSON.parse(localStorage.getItem('orders_' + user) || '[]');
        let html = '';
        if (orders.length === 0) {
            html = '<p style="color:#888;">暂无历史订单</p>';
        } else {
            html = '<h3>历史订单</h3><ul>';
            orders.forEach((order, idx) => {
                html += `<li>
                    <div>下单时间：${order.time}</div>
                    <div>收货地址：${order.address}</div>
                    <div>商品：${order.items.map(item => `${item.name} x${item.quantity}`).join('，')}</div>
                    <div class="order-total">总价：￥${order.total}</div>
                    <button onclick="deleteOrder(${idx})" style="margin-top:6px;background:#e4393c;color:#fff;border:none;border-radius:4px;padding:4px 14px;cursor:pointer;">删除</button>
                </li>`;
            });
            html += '</ul>';
        }
        document.getElementById('orderHistory').innerHTML = html;
    }

    // 删除指定订单
    function deleteOrder(idx) {
        const user = localStorage.getItem('currentUser');
        if (!user) return;
        let orders = JSON.parse(localStorage.getItem('orders_' + user) || '[]');
        if (idx >= 0 && idx < orders.length) {
            if (confirm('确定要删除该订单吗？')) {
                orders.splice(idx, 1);
                localStorage.setItem('orders_' + user, JSON.stringify(orders));
                showProfile();
            }
        }
    }

    showProfileWithAvatar();
    </script>
</body>
</html>